<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>客户系统</el-breadcrumb-item>
      <el-breadcrumb-item>网络追踪</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 表单 -->
      <el-form
        :inline="true"
        v-bind:model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="名称">
          <el-input
            v-model="formInline.StudentName"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="跟踪方式">
          <el-select
            v-model="formInline.FollowType"
            placeholder="请选择跟踪方式"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="面谈" value="面谈"></el-option>
            <el-option label="电话" value="电话"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" round>搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="Id" label="编号"> </el-table-column>
        <el-table-column prop="StudentName" label="姓名"> </el-table-column>
        <el-table-column prop="FollowTime" label="跟踪时间"> </el-table-column>
        <el-table-column prop="Content1" label="内容"> </el-table-column>
        <el-table-column prop="NextFollowTime" label="下次跟踪时间"></el-table-column>
        <el-table-column prop="FollowType" label="跟踪方式"> </el-table-column>
        <el-table-column prop="FollowState" label="回访情况"> </el-table-column>
        <el-table-column prop="UserName" label="跟踪人"> </el-table-column>
        <el-table-column label="操作" fixed="right" >
          <template slot-scope="scope">
            <el-button type="infor" size="mini" @click="studetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper "
        :total="count"
      >
      </el-pagination>


<el-dialog title="查看所有" :visible.sync="dialogSelectFormVisible">
				<el-form :model="editform" label-width="100px">
					<el-form-item label="编号"><el-input disabled v-model="editform.Id" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="名字"><el-input disabled v-model="editform.StudentName" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="跟踪时间"><el-input disabled v-model="editform.FollowTime" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="内容"><el-input disabled v-model="editform.Content1" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="下次跟踪时间"><el-input disabled v-model="editform.NextFollowTime" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="跟踪方式"><el-input disabled v-model="editform.FollowType" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="回访情况"><el-input disabled v-model="editform.FollowState" autocomplete="off"></el-input></el-form-item>
					<el-form-item label="跟踪人"><el-input disabled v-model="editform.UserName" autocomplete="off"></el-input></el-form-item>
				</el-form>
			</el-dialog>

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        StudentName: "",
        FollowType: "",
      },
      page: 1,
      limit: 10,
      count: 0,
      tableData: [],
	  		editform :[],
			dialogSelectFormVisible : false,

    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    async getTableList() {
      const { data: res } = await this.$http.get(
        "api/Follow/GetList?page=" +
          this.page +
          "&limit=" +
          this.limit +
          "&StudentName=" +
          this.formInline.StudentName +
          "&FollowType=" +
          this.formInline.FollowType
      );
      console.log(res);
      this.count = res.count;
      this.tableData = res.data;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getTableList();
    },
    onSubmit() {
      this.getTableList();
    },
	//详情
		studetail(row) {
			this.editform = row;
			this.dialogSelectFormVisible = true;
		},
  },
};
</script>

<style>
.el-dialog {
  width: 100%;
}
</style>
